const echarts = require("echarts");
export default {
  data() {
    return {
      echart1: undefined,
      echart2: undefined,
      echart3: undefined,
      echart4: undefined,
      echart5: undefined,
      echart6: undefined,
      echart7: undefined,
      echart8: undefined,
      echart9: undefined,
      startCharts1: undefined,
      startCharts2: undefined,
      startCharts3: undefined,
      startCharts4: undefined,
      startCharts5: undefined,
      startCharts6: undefined,
      startCharts7: undefined,
      startCharts8: undefined,
      startCharts9: undefined,
    };
  },
  methods: {
    initChart3(data) {
      let nameColor = {
        // NC严重不符合项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "#FF1600" },
        //   { offset: 1, color: "#FFA792" },
        // ]),
        // NC一般不符合项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "#B24E45" },
        //   { offset: 1, color: "rgba(247,143,126,0.85)" },
        // ]),
        // OFI建议项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "rgba(26,178,243,0.85)" },
        //   { offset: 1, color: "rgba(11,123,227,0.85)" },
        // ]),
        // 观察项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "rgba(67,216,205,0.85)" },
        //   { offset: 1, color: "rgba(32,176,159,0.85)" },
        // ]),
        拉晶事业部: {
          itemStyle: {
            color:'#3FA4FF'
          },
          label:{
            color:'#3FA4FF'
          }
        },
        切片事业部: {
          itemStyle: {
            color:'#E1795B'
          },
          label:{
            color:'#E1795B'
          }
        },
        电池事业部:{
          itemStyle: {
            color:'#84F7FF'
          },
          label:{
            color:'#84F7FF'
          }
        },
        海外事业部:{
          itemStyle: {
            color:'#FFE700'
          },
          label:{
            color:'#FFE700'
          }
        },
        组件事业部:{
          itemStyle: {
            color:'#F86FA2'
          },
          label:{
            color:'#F86FA2'
          }
        },
        光伏事业部:{
          itemStyle: {
            color:'#FBCC8B'
          },
          label:{
            color:'#FBCC8B'
          }
        }
      };
      let options = {
        backgroundColor: "transparent",
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 12,
          },
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
        },
        grid: {
          show: false,
          top: 0,
          bottom: 0,
          containLabel: true,
        },
        // title: {
        //   left: 10,
        //   top: 5,
        //   text: this.$t('cockpit3.checklist'),
        //   textStyle: {
        //     fontSize: 16,
        //     color:'white'
        //   }
        // },
        // legend: {
        //   icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        //   itemWidth: 10,  // 设置宽度
        //   itemHeight: 10, // 设置高度
        //   itemGap: 10, // 设置间距
        //   orient: "vertical",
        //   left: 20,
        //   top:'center',
        //   data: keys,
        //   textStyle: {
        //     color:  '#ffffff'
        //   }
        // },
        series: [
          {
            name: this.$t("cockpit.visitSource"),
            type: "pie",
            radius: ["20%", "60%"],
            center: ["50%", "59%"],
            avoidLabelOverlap: true,
            labelLine: {
              minTurnAngle: 0,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "white",
            },
            label: {
              // show: false,
              textStyle: {
                color: "white",
              },
              formatter: "{b}\n{c}%", //设置左边图上的%
            },
            data: data.map((i) => {
              return {
                name: i.divisionName,
                value: i.rate,
                ...nameColor[i.divisionName],
              };
            }),
          },
        ],
      };
      this.echart3 = echarts.init(this.$refs.echart3);
      this.echart3.setOption(options);
      window.addEventListener("resize", () => this.echart3.resize());
      this.echart3.on("click", (params) => {
        const { beginTime, endTime } = this.queryParams;
        this.$router.push({
          path:
            "/inspect/inventoryManagement?inspectionStartTime=" +
            beginTime +
            "&inspectionEndTime=" +
            endTime,
        });
      });
    },
    initChart4(data) {
      let nameColor = {
        // 'NC严重不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: '#FF1600' },
        //   { offset: 1, color: '#FFA792' },
        // ]),
        // 'NC一般不符合项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: '#B24E45' },
        //   { offset: 1, color: 'rgba(247,143,126,0.85)' },
        // ]),
        // 'OFI建议项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: 'rgba(26,178,243,0.85)' },
        //   { offset: 1, color: 'rgba(11,123,227,0.85)' },
        // ]),
        // '观察项': new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: 'rgba(67,216,205,0.85)' },
        //   { offset: 1, color: 'rgba(32,176,159,0.85)' },
        // ])
        合格: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#00FEEE" },
              { offset: 1, color: "#038B78" },
            ]),
          },
          label: {
            color: "#84F7FF",
          },
        },
        不合格: {
          itemStyle:{
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FC8A59" },
                { offset: 1, color: "#9B2706" },
              ]),
          },
          label:{
            color:'#E1795B'
          }
        },
        待检验:{
          itemStyle:{
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0EABEC" },
                { offset: 1, color: "#0672D5" },
              ]),
          },
          label:{
            color:'#3FA4FF'
          }
        }
      };
      let options = {
        backgroundColor: "transparent",
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 12,
          },
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
        },
        roseType: "area",
        grid: {
          show: false,
          top: 0,
          bottom: 0,
          containLabel: true,
        },
        title: {
          // left: 10,
          // top: 5,
          // text: this.$t('cockpit3.inspectionResult'),
          // textStyle: {
          //   fontSize: 16,
          //   color:'white'
          // }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["20%", "60%"],
            center: ["50%", "59%"],
            avoidLabelOverlap: true,
            labelLine: {
              minTurnAngle: 0,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "white",
            },
            label: {
              // show: false,
              textStyle: {
                color: "white",
              },
              formatter: "{b}\n{c}%", //设置左边图上的%
            },
            data: data.map((i) => {
              return {
                name: i.name,
                value: i.ratio,
                // itemStyle: {
                //   color: nameColor[i.ratio],
                // },
                ...nameColor[i.name],
              };
            }),
          },
        ],
      };
      this.echart4 = echarts.init(this.$refs.echart4);
      console.log(options);
      this.echart4.setOption(options);
      window.addEventListener("resize", () => this.echart4.resize());
      this.echart4.on("click", (params) => {
        const { beginTime, endTime } = this.queryParams;
        let decideResult = "";
        if (params.name === "不合格") {
          decideResult = 0;
        }
        if (params.name === "合格") {
          decideResult = 1;
        }
        this.$router.push({
          path:
            "/inspect/incoming?inspectionStartTime=" +
            beginTime +
            "&inspectionEndTime=" +
            endTime +
            "&sheetStatus=6&decideResult=" +
            decideResult,
        });
      });
    },
    initChart5(data) {
      let nameColor = {
        // NC严重不符合项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "#FF1600" },
        //   { offset: 1, color: "#FFA792" },
        // ]),
        // NC一般不符合项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "#B24E45" },
        //   { offset: 1, color: "rgba(247,143,126,0.85)" },
        // ]),
        // OFI建议项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "rgba(26,178,243,0.85)" },
        //   { offset: 1, color: "rgba(11,123,227,0.85)" },
        // ]),
        // 观察项: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        //   { offset: 0, color: "rgba(67,216,205,0.85)" },
        //   { offset: 1, color: "rgba(32,176,159,0.85)" },
        // ]),
        挑选使用: {
          itemStyle: {
            color:'#45FFA5'
          },
          label:{
            color:'#45FFA5'
          }
        },
        特采: {
          itemStyle: {
            color:'#3FA4FF'
          },
          label:{
            color:'#3FA4FF'
          }
        },
        退货:{
          itemStyle: {
            color:'#84F7FF'
          },
          label:{
            color:'#84F7FF'
          }
        },
        MRB评审中:{
          itemStyle: {
            color:'#F86FA2'
          },
          label:{
            color:'#F86FA2'
          }
        },
        待发MRB:{
          itemStyle: {
            color:'#FBCC8B'
          },
          label:{
            color:'#FBCC8B'
          }
        },
      };
      let options = {
        backgroundColor: "transparent",
        // color: this.colors,//配置颜色
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 12,
          },
          // position: ['50%','50%'],
          // formatter: "{b}<br/>问题总数: {c}<br/>问题总数百分比:{d}%"
        },
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
        },
        grid: {
          show: false,
          top: 0,
          bottom: 0,
          containLabel: true,
        },
        // title: {
        //   left: 10,
        //   top: 5,
        //   text: this.$t('cockpit3.unqualifiedInspectionSheet'),
        //   textStyle: {
        //     fontSize: 16,
        //     color:'white'
        //   }
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["25%", "60%"],
            center: ["50%", "59%"],
            avoidLabelOverlap: true,
            labelLine: {
              minTurnAngle: 0,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "white",
            },
            label: {
              // show: false,
              textStyle: {
                color: "white",
              },
              formatter: "{b}\n{c}%", //设置左边图上的%
            },
            data: data.map((i) => {
              return {
                name: i.typeCodeText,
                value: i.rate,
                ...nameColor[i.typeCodeText],
                
              };
            }),
          },
        ],
      };
      this.echart5 = echarts.init(this.$refs.echart5);
      this.echart5.setOption(options);
      window.addEventListener("resize", () => this.echart5.resize());
      this.echart5.on("click", (params) => {
        let io = this.dict.type.NYIQC_NCR_DECISION.find((item) => {
          return item.label == params.name;
        });
        this.$router.push({
          path: "/inspect/incoming?decideResult=1&usingDecision=" + io.value,
        });
      });
    },
  },
};
